<template>
  <el-collapse-item name="2">
    <template #title>
      <h2>服务器</h2>
    </template>
    <div
      v-if="config?.server && config.server?.user_mqtt"
      v-for="(item, idx) in config_list"
      :key="idx"
    >
      <h3>
        {{ item.title }}
        <el-button
          :type="config?.server[item.key]?.connect ? 'success' : 'danger'"
          style="width: 20px; height: 20px; margin: auto 0"
          circle
        />
      </h3>
      <el-row
        v-for="(param, idx) in item.params"
        :key="item.title + '_' + idx"
        align="middle"
        style="margin-top: 20px"
      >
        <el-col :span="4">
          <b>{{ param.label }}</b>
        </el-col>
        <el-col :span="19">
          <el-input
            v-model="config.server[item.key][param.key]"
            style="width: 100%"
            :placeholder="`请输入${param.label}`"
          />
        </el-col>
      </el-row>
      <el-divider></el-divider>
    </div>
    <el-button
      type="primary"
      style="margin-top: 10px; width: 90%"
      :loading="server_api.ticks?.mqtt_update_config > 0"
      :disabled="!change"
      @click="server_api.mqtt_update_config(config.server.user_mqtt)"
    >
      保存
    </el-button>
  </el-collapse-item>
</template>
<script setup lang="ts">
import store from "~/utils/store";
import server_api from "~/utils/server_api";
const config = toRef(store);
const change = computed(() => {
  return (
    JSON.stringify(config.value.server.mqtt) !=
    JSON.stringify(config.value.server.user_mqtt)
  );
});
// const server_config = ref({
//   // blinker: { password: "" },
//   // bemfa: { key: "", id: "appID", password: "secretKey" },
//   mqtt: { ip: "", port: 1883, user: "", pwd: "", key: "" },
// });
const config_list = [
  // {
  //   title: "电灯科技",
  //   key: "blinker",
  //   params: [
  //     {
  //       label: "密钥",
  //       key: "password",
  //     },
  //   ],
  // },
  // {
  //   title: "巴法云",
  //   key: "bemfa",
  //   params: [
  //     {
  //       label: "私钥",
  //       key: "key",
  //     },
  //     {
  //       label: "ID",
  //       key: "id",
  //     },
  //     {
  //       label: "密钥",
  //       key: "password",
  //     },
  //   ],
  // },
  {
    title: "MQTT",
    key: "user_mqtt",
    params: [
      {
        label: "IP",
        key: "ip",
      },
      {
        label: "端口",
        key: "port",
      },
      {
        label: "用户名",
        key: "user",
      },
      {
        label: "密码",
        key: "pwd",
      },
      {
        label: "密钥",
        key: "key",
      },
    ],
  },
];
</script>
<style scoped></style>
